<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}" class="supplier-manage-detail">
    <el-row class="detail-top">
      <Title title="供应商信息 " font-size="16px" style="margin-bottom:6px;"/>
      <el-form
        ref="queryForm"
        :class="{'mobile-el-form': showMobilePage}"
        :label-position="showMobilePage ? 'left' : 'right'"
        class="lineHeight32 dividing"
        label-width="90px">
        <el-row class="form-bottom">
          <el-col :span="8">
            <el-form-item label="供应商名称：" prop="supplier">
              <div class="supplier-name-container">
                <ToolTip :content="baseInfo.supplier" class="supplier-name-label" />
                <SearchContract v-if="baseInfo.supplier" :opp-company-id="supplierId" :opp-company="baseInfo.supplier" :opp-company-type="2" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="可抵扣税率：" prop="deductionRate">
              <div>
                <span v-if="baseInfo.deductionRate || baseInfo.deductionRate === 0">{{ baseInfo.deductionRate || 0 }} %</span>
                <span v-else>--</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人：">
              <div>{{ baseInfo.createUser || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商类型：" prop="supplierType">
              <div>{{ baseInfo.supplierType | supplierStatus }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注：">
              <ToolTip :content="baseInfo.remark" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：">
              <div>{{ baseInfo.createTime | standardFormatNoHour('YYYY/MM/DD HH:mm', '--') }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签：">
              <TagSelect v-model="baseInfo.tag" mode="detail" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="协作人：">
              <ToolTip :content="baseInfo.associate" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <div class="supplier-manage-resource">
      <div class="headerTab">
        <Title title="收款账户" font-size="16px"/>
        <PlainCreateBtn :class="!isDisabled || 'forbid-btn'" @click="accountAdd">添加收款账户</PlainCreateBtn>
        <!-- <div class="create-resource-btn">
          <div :class="!isDisabled || 'forbid-btn'" class="create-resource-btn" @click="accountAdd">
            添加收款账户<i class="el-icon-plus" style="font-size: 14px;margin-left: 5px;" />
          </div>
        </div> -->
      </div>
      <div class="account-container">
        <accountTable ref="accountTable" :type="2" :supplier-id="supplierId" module-name="萌力供应商" @handleEdit="handleEdit"/>
      </div>
    </div>
    <createDialog ref="createDailog" @updateData="updateAccountData"/>
    <fixed-pagination>
      <div class="center">
        <el-button v-if="hasRouteAuth('mengli:supplier:edit')" size="small" type="primary" @click="editSupplier">编辑</el-button>
        <el-button v-if="hasRouteAuth('mengli:supplier:delete')" size="small" type="info" class="back-btn cancel-btn-style" @click="toDel">删除</el-button>
        <el-button
          class="back-btn cancel-btn-style"
          type="info"
          size="small"
          @click.native="handleBack"
        >返回</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import { hasRouteAuth } from '@/utils/permission';
import { mengliSupplierInfo, deleteSupplier } from '@/api/mengli';
import { standardFormatNoHour } from '@/filters/date';
import Title from '@/components/Title';
import TagSelect from '@/components/Common/tagSelect';
import SearchContract from '@/components/Common/SearchContract';
import accountTable from '../../commerce/supplier/detail/module/accountTable';
import createDialog from '../../commerce/supplier/detail/module/createDialog';
import { mapState } from 'vuex';
import { showModal } from '@/utils/message';

export default {
  filters: {
    standardFormatNoHour,
    supplierStatus(type) {
      const obj = {
        '0': '公司',
        '1': '个人'
      };
      return obj[String(type)] || '--';
    }
  },
  components: {
    Title,
    SearchContract,
    TagSelect,
    accountTable,
    createDialog
  },
  data() {
    return {
      supplierId: null,
      baseInfo: {},
      resourceInfo: [],
      isDisabled: false, // 编辑状态无法创建资源组
      isUpdate: false,
      isOneself: null,
      tabIndex: 0
    };
  },
  computed: {
    supplierTabs() {
      return [{
        'id': 0,
        'name': '资源组',
        'num': 0
      }, {
        'id': 1,
        'name': '收款账户',
        'num': 0
      }];
    },
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })

  },
  created() {
    this.supplierId = Number(this.$route.params.id) || null;
    this.mengliDetail();
  },
  methods: {
    hasRouteAuth,
    accountAdd() {
      this.$refs.createDailog.openDialog(this.supplierId, 2);
    },
    editSupplier() {
      this.$router.push({
        name: 'mengliEditSupplier',
        params: {
          id: this.supplierId
        }
      });
    },
    toDel() {
      showModal('是否确定删除', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: ' del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        deleteSupplier(this.supplierId).then(res => {
          if (res.code === 200) {
            this.$router.push({
              name: 'mengliSuppliers'
            });
            this.$message.success('删除成功');
          } else {
            this.$message.warning(res.message);
          }
        });
      });
    },
    mengliDetail() {
      mengliSupplierInfo(this.supplierId, { costBelong: 2 }).then((res) => {
        this.baseInfo = res.data;
        this.baseInfo.associate = this.baseInfo.associate ? this.baseInfo.associate.map(item => {
          return item.userName;
        }).join(',') : '';
      });
    },
    handleBack() {
      this.$router.push({
        name: 'mengliSuppliers'
      });
    },
    handleEdit(val) {
      this.$refs.createDailog.openDialog(this.supplierId, 2, val);
    },
    updateAccountData() {
      this.$refs.accountTable.getAccountData(true);
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-manage-detail {
  .headerTab{
    display: flex;
    align-items: center;
    .create-resource-btn {
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      width:120px;
      height:32px;
      background:rgba(64,110,255,1);
      font-size:14px;
      font-weight:500;
      color:rgba(255,255,255,1);
      line-height:14px;
      border-radius: 4px;
    }
    .forbid-btn {
      background:rgba(64,110,255,1);
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
  .supplier-manage-resource {
    padding: 14px 24px 24px 24px;
    // margin-top: 8px;
    background: #fff;
    min-height: calc(100vh - 116px);
    margin: 0 16px 56px;
    ::v-deep .supplier-account-container {
      padding-top: 4px;
    }
  }
  .detail-top {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 16px 24px 0 24px;
  .item {
    margin-bottom: 0px!important;
  }
  .btn{
    width: 48px;
    height: 28px;
    padding: 0;
  }
  .form-bottom {
    &::v-deep {
      .el-form-item {
        margin-bottom: 0;
      }
      .el-form-item__label {
        color: #999 !important;
        padding: 0 !important;
      }
      .el-form-item__content {
        color: #333;
      }
    }
    .supplier-name {
      width: 238px;
    }
    .remark {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .remark-text {
        width: 112px;
      }
      .remark-edit-disabled {
        cursor: not-allowed;
      }
      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }
}
  &.mobile-detail-wrap {
    .detail-top {
      margin: 0;
      padding: 12px;
    }
    .supplier-manage-resource {
      margin: 0;
      padding: 12px 12px 55px 12px;
    }
    ::v-deep .el-form-item__content {
      border-right: none !important;
    }
    .account-container {
      ::v-deep .el-table__cell {
        padding: 6px 0;
      }
    }
  }
}

.dividing{
  &::v-deep {
    .el-col {
      .el-form-item__content {
        border-right: 1px solid #EBEEFD;
      }
      &:nth-child(3n) {
        .el-form-item__content {
          border-right: none;
        }
      }
      &:last-child {
        .el-form-item__content {
          border-right: none;
        }
      }
    }
  }
}
.supplier-name-container {
  display: flex;
  .supplier-name-label {
    max-width: calc(100% - 70px);
  }
}
</style>
